<template>
    <div>
        <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
	    <div class="ball" v-show="flag" ref="ball"></div>
        	
        </transition>
		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner center">
						<LunBoTu :arraylist="arraylist"  ></LunBoTu>
					</div>
				</div>
		</div>

		<div class="mui-card">
				<div class="mui-card-header">Redmi K20</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
							市场价: <del>￥2099</del>&nbsp;&nbsp;销售价:<span class="now_price">￥1999</span>
						</p>
						<p>
							购买数量:<NumberBox></NumberBox>
						</p>
						<p>
							<mt-button type="primary" size="small">立即购买</mt-button>
							<mt-button type="danger" size="small" @click="donghua">加入购物车</mt-button>
						</p>
					</div>
				</div>
				<div class="mui-card-footer">页脚</div>
		</div>



	</div>
	
</template>

<script type="text/javascript">
	import LunBoTu from '../components/lunbotu/lunbotu.vue'
	import NumberBox from "../components/number-box.vue"
	export default{
		data(){
			return {
		         arraylist:[
		         {img:"https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1569557726.43469147.jpg",num:1},
		         {img:'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1569557791.42599270.jpg',num:2},
		         {img:'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1569557789.01494142.jpg',num:3}
			    ],
			    flag:false
		   };
		},
		components:{
			LunBoTu,
			NumberBox
		},
		methods:{
			donghua(){

				this.flag=!this.flag;
			},
			beforeEnter(el){
				el.style.transform="translate(0,0)";

			},
			enter(el,done){
				const ballPosition=this.$refs.ball.getBoundingClientRect();
				const badgePosition=document.getElementById("badge").getBoundingClientRect();
				const xDist=badgePosition.left-ballPosition.left;
				const yDist=badgePosition.top-ballPosition.top;
				el.offsetWidth;
				el.style.transform=`translate(${xDist}px,${yDist}px)`;
				el.style.transition="all .5s cubic-bezier(.59,-0.33,.94,.75)";
				done();

			},
			afterEnter(el){
				this.flag=!this.flag;

			}

				

				
		}
	}
</script>
<style>
	.now_price{
		color: red;
		font-size: 20px;
	}
	.center{
		padding: 0;
		text-align: center;
	}
	.ball{
		width:15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		z-index: 99;
		left:137px;
		top:360px;
	}
</style>